<template>
  <a-modal
    :title="`审核`"
    :ok-button-props="{ style: model.status == 1 && { display: 'none' } }"
    :width="680"
    :visible="visible"
    :confirmLoading="loading"
    :maskClosable="false"
    okText="确定"
    @ok="onAgent"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form v-if="model" :form="form" v-bind="formLayout">
        <a-form-item v-if="model && model.log_id" label="主键ID" hidden>
          <a-input v-decorator="['log_id', { initialValue: model.log_id }]" disabled />
        </a-form-item>
        <a-form-item label="整改对象">
          <div>{{ model.family_master_name }}</div>
        </a-form-item>
        <a-form-item label="发起人">
          <div>{{ model.fullname }}</div>
        </a-form-item>
        <a-form-item label="积分类型">
          <div>{{ model.action_name }}</div>
        </a-form-item>
        <a-form-item label="扣分">
          <div>{{ model.point }}</div>
        </a-form-item>
        <a-form-item label="扣分内容">
          <div>{{ model.action_content }}</div>
          <div>
            <img
              @click="previewImage = item;previewVisible = true"
              v-for="(item, index) in model.action_image"
              :key="index"
              style="width: 120px; height: 120px; border-radius: 5px; margin: 5px; cursor: pointer;"
              :src="item">
          </div>
        </a-form-item>
        <a-form-item label="整改状态">
          <div v-if="model.status == 0">未整改</div>
          <div v-if="model.status == 1">整改中</div>
          <div v-if="model.status == 2">已整改</div>
        </a-form-item>
        <a-form-item label="整改内容">
          <div v-if="model.rectify_image.length > 0 && isimg">
            <img
              @click="previewImage = item;previewVisible = true"
              v-for="(item, index) in model.rectify_image"
              :key="index"
              style="width: 120px; height: 120px; border-radius: 5px; margin: 5px; cursor: pointer;"
              :src="item">
          </div>
          <div v-else><Upload @change="change" :maxLength="3"></Upload></div>
        </a-form-item>
        <!-- <a-form-item label="选项内容">
          <a-input :disabled="okHidden" placeholder="请输入选项内容" v-decorator="['option', {rules: [{required: true, message: '选项内容不能为空！' }, {max: 10, message: '最大可输入10个字符！' }]}]" />
        </a-form-item> -->
        <!-- <a-form-item label="状态">
          <a-input :disabled="okHidden" v-decorator="['status']" />
        </a-form-item> -->
        <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import Upload from '@/components/Upload/Upload'
import { agent } from '@/api/distribution'
// 表单字段
const fields = ['log_id', 'family_master_name', 'status']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    okHidden: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    return {
      previewVisible: false,
      previewImage: '',
      isimg: true,
      form: this.$form.createForm(this),
      currentLength: 0,
      list: []
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', n => {
      if (n) {
        const data = pick(this.model, fields)
        this.$nextTick(() => {
          this.form.setFieldsValue(data)
        })
      }
    })
  },
  methods: {
    change (e) {
      this.isimg = false
      this.model.rectify_image = e.map((item) => {
        return item.url
      })
    },
    onAgent () {
      if (this.model.rectify_image.length <= 0) {
        this.$message.info('请上传整改内容')
        return
      }
      const success = (res, info) => {
        if (res.is_ok == 'Y') {
          this.$emit('refresh')
          this.$message.info(info)
          this.isimg = true
        }
      }
      const final = () => { this.confirmLoading = false }
      agent({ log_id: this.model.log_id, rectify_image: this.model.rectify_image.toString() })
      .then(res => success(res, '代办成功'))
      .finally(final)
    }
  },
  components: {
    Upload
  }
}
</script>

<style scoped>
  >>> .ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0
  }
  >>> .clearfix {
    height: 110px
  }
  >>> .remove70 {
    margin-bottom: 110px !important;
    height: 300px !important;
  }
  .htm {
    min-height: 40px;
    max-height: 350px;
    overflow-y: scroll;
    width: 100%;
    border: 1px solid #eee
  }
</style>
